<template>
  <XHeader @on-click-back="headerBack" :left-options="leftOption" id="header" class="vux-1px-b" :class="{ 'app-header': isAppHeader }">
    <slot name="overwrite-title"><div class="title">{{$route.query.titleName || $route.meta.title}}</div></slot>
  </XHeader>
</template>

<script>
  import { XHeader } from 'vux';
  // import router from '../../router';
  export default {
    name: 'Header',
    components: {
      XHeader
    },
    data () {
      return {
        leftOption: {
          preventGoBack: true,
          backText: ''
        },
        // 是否為發起申請頁面頭部
        isAppHeader: false,
        // 二級頁面
        secondaryRoutePage: new Set([
          'WriteSecret',
          'WriteContract',
          'WriteKey',
          'WriteFDH',
          'WriteAskLeave',
          'WriteHolLeave',
          'ToDoList',
          'ApplicationList'
        ])
      };
    },
    watch: {
      $route () {
        this.checkIsAppHeader();
      }
    },
    methods: {
      // 頭部返回按鈕
      headerBack: function () {
        let routeName = this.$route.name;
        if (this.secondaryRoutePage.has(routeName)) {
          localStorage.setItem('MakeCopyType', '');
          this.$router.push({name: 'InitiateApplication'});
        } else if (routeName === 'InitiateApplication') {
          console.log('已經是發起申請頁面了');
        } else if (routeName === 'EditAskLeaveDatetime') {
          this.$router.replace({
            name: 'ApplicationDetail',
            query: {
              item: JSON.stringify({
                KeyId: JSON.parse(this.$route.query.editAskLeaveDatetimeInfo).KeyId
              })
            }
          });
        } else if (routeName === 'SelectPerson') {
          let toRouterName = localStorage.getItem('MakeCopyType');
          this.$router.push({
            name: toRouterName,
            params: {
              isBack: true
            },
            query: this.$route.query
          });
        } else if (routeName === 'ToDoDetail' && window.history.length === 1) {
          this.$router.push({ name: 'ToDoList' });
        } else if (routeName === 'ApplicationDetail' && window.history.length === 1) {
          this.$router.push({ name: 'ApplicationList' });
        } else {
          localStorage.removeItem('MakeCopyType');
          this.$router.back();
        };
      },
      // 檢測是否為發起申請頁面
      checkIsAppHeader: function () {
        if (this.$route.name === 'InitiateApplication') {
          this.isAppHeader = true;
        } else {
          this.isAppHeader = false;
        }
      }
    },
    mounted () {
      this.checkIsAppHeader();
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  #header{
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2px 0;
    z-index: 10;
    &:after{
      border-color: $header-bdcolor;
    }
    .title{
      font-weight:bold;
    }
  }
  #header.app-header{
    background: transparent;
    &:after{
      content: none;
    }
    .title{
      color: #fff;
    }
    .left-arrow{
      &:before{
        border-color: #fff;
      }
    }
  }
</style>
